Hey everyone! With the midpoint of 2022 just passing, we decided we should let our users know what's in store for them for the remainder of the year. To figure out what we should add next, we talked to many developers, and we greatly appreciate all the feedback you guys have given us thus far!
Semantic Elements (input, button, href)
One particular feature that was often requested was code generation for semantic elements. We initially didn't put it in immediately as this was something that was difficult to implement, and at that point our primary concern was to focus on the code quality output, something that was a big problem in this Figma-to-code market. (I won't say that we've mastered this aspect of Figma-to-code, but I can assure you that our current code output quality is probably one of the best in the market)
Code quality aside, we also want to reduce the workload of our users having to manually change the div tags into the actual ones they wanted. We intend to begin with with tags like input, button, and anchor. We are also considering adding in the more complicated form field elements (if time permits).
We will probably also have to design a UI to help users declare specific Figma frames as semantic elements. That means it's time for some user testing! We'll be reaching out to some of you to help us test and build the user experience together with us. I'll update you guys again when it happens!
Generate Figma Interactions (hover, overlay)
Another must have feature that developers asked for the code generated to support some level of interactivity. We realised that some of you like to animate the interactions within Figma itself. To solve your problems, we're adding in code generation for the following Figma interactions:
- On Click
- While Hovering
- While Pressing
which can be mapped to the following Figma behaviour
- Open Overlay
- Swap Overlay
- Close Overlay
- Open Link
We hope that what we listed above proves useful for you guys! We think this will particularly be useful for advanced Figma users who often tend to program interactivity into their designs.
p.s. We are aware of the navigation feature in Figma! However, we will be putting that implmentation on hold as there are currently mutiple popular and easy to use code libraries in the market (e.g. React Router) that could help you with page navigation for your web application
More output formats (HTML)
FInally, we had a few requests coming in for HTML output. Someone even mentioned that that they would pay for HTML output. My answer to you is no problem! We'll add HTML output eventually, and maybe along the way, Angular, Vue, and whatever code output you guys request for. The only reason we chose to start off with React was because we wanted to cater to the majority developers who wanted to generate code in React and Tailwind.
As a startup we need to be fast and agile, making decisions on the go, so I won't say that these features are 100% confirmed. But I can assure you guys that the FireJet team is fast and agile! Even if we don't add these in, we will probably add in other features of equivalent value keeping a tight grip on the standards in terms of code quality.